<template>
  <view class="tutor-container">
    <!-- 列表内容 -->
    <view class="tutor-list">
      <view class="tutor-item" v-for="item in tutorList" :key="item.id">
        <view class="tutor-info">
          <view class="tutor-name">{{ item.name }}</view>
          <view class="tutor-basic">
            <text>{{ item.gender === 1 ? '男' : '女' }}</text>
            <text>{{ item.age }}岁</text>
            <text>{{ item.stars }}星</text>
            <text>￥{{ item.price }}/小时</text>
          </view>
          <view class="tutor-desc">{{ item.content || '暂无介绍' }}</view>
        </view>
        <view class="tutor-actions">
          <button class="action-btn view-btn" @click="viewDetail(item.id)">查看详情</button>
          <button class="action-btn edit-btn" @click="editTutor(item.id)">编辑</button>
          <button class="action-btn delete-btn" @click="deleteTutor(item.id)">删除</button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="tutorList.length === 0 && !loading">
        <text>暂无助教数据</text>
      </view>
      
      <!-- 加载中状态 -->
      <view class="loading-state" v-if="loading">
        <text>加载中...</text>
      </view>
    </view>
    
    <!-- 分页 -->
    <view class="pagination" v-if="total > 0">
      <view class="page-info">
        <text>共{{ total }}条记录，第{{ currentPage }}/{{ totalPage }}页</text>
      </view>
      <view class="page-buttons">
        <button class="page-btn" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">上一页</button>
        <button class="page-btn" :disabled="currentPage === totalPage" @click="changePage(currentPage + 1)">下一页</button>
      </view>
    </view>
    
    <!-- 添加按钮 -->
    <view class="add-btn-container">
      <button class="add-btn" @click="addTutor">添加助教</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tutorList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      totalPage: 0
    };
  },
  onLoad() {
    this.getTutorList();
  },
  methods: {
    // 获取助教列表
    async getTutorList() {
      try {
        this.loading = true;
        const res = await this.$request({
          url: '/tutor/index',
          method: 'GET',
          params: {
            page: this.currentPage,
            limit: this.pageSize
          }
        });
        
        if (res.code === 1) {
          // 根据接口返回格式，这里是单个对象
          this.tutorList = [res.data];
          this.total = 1;
          this.totalPage = 1;
        } else {
          throw new Error(res.msg || '获取助教列表失败');
        }
      } catch (error) {
        console.error('获取助教列表失败:', error);
        uni.showToast({
          title: error.message || '获取助教列表失败',
          icon: 'none'
        });
        this.tutorList = [];
      } finally {
        this.loading = false;
      }
    },
    
    // 切换页码
    changePage(page) {
      if (page < 1 || page > this.totalPage) {
        return;
      }
      this.currentPage = page;
      this.getTutorList();
    },
    
    // 查看详情
    viewDetail(id) {
      uni.navigateTo({
        url: `/pages/tutor/components/tutordetail?id=${id}`
      });
    },
    
    // 编辑助教
    editTutor(id) {
      uni.navigateTo({
        url: `/pages/tutor/components/tutoredit?id=${id}`
      });
    },
    
    // 添加助教
    addTutor() {
      uni.navigateTo({
        url: '/pages/tutor/components/tutoredit'
      });
    },
    
    // 删除助教
    deleteTutor(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该助教吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await this.$request({
                url: '/tutor/delete',
                method: 'POST',
                data: {
                  ids: id
                }
              });
              
              if (result.code === 1) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
                // 重新获取列表
                this.getTutorList();
              } else {
                throw new Error(result.msg || '删除失败');
              }
            } catch (error) {
              console.error('删除助教失败:', error);
              uni.showToast({
                title: error.message || '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.tutor-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.tutor-list {
  margin-bottom: 20rpx;
}

.tutor-item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tutor-info {
  margin-bottom: 20rpx;
}

.tutor-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.tutor-basic {
  display: flex;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.tutor-basic text {
  font-size: 24rpx;
  color: #666;
}

.tutor-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.5;
}

.tutor-actions {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
}

.action-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 8rpx;
  margin: 0;
}

.view-btn {
  background-color: #4cd964;
  color: #fff;
  border: none;
}

.edit-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
}

.delete-btn {
  background-color: #ff3b30;
  color: #fff;
  border: none;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.loading-state {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.pagination {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.page-info {
  text-align: center;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  color: #666;
}

.page-buttons {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.page-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 8rpx;
  margin: 0;
}

.add-btn-container {
  padding: 0 20rpx 20rpx 20rpx;
}

.add-btn {
  width: 100%;
  height: 90rpx;
  background-color: #4cd964;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>